import { UiButton } from "@/shared/Uikit"
import { Modal, ModalBody, ModalContent, useDisclosure } from "@nextui-org/react"
import UiCreateTheme from "./UiCreateTheme"

type CreateThemeBtnProps = {
    disciplineId: number
    level: number
    onSuccess?: () => void
}


export function CreateThemeButton(props: CreateThemeBtnProps) {
    const { isOpen, onOpenChange, onOpen } = useDisclosure()

    return <>
        <UiButton
            onClick={onOpen}
            variant='primary'
        >
            +
        </UiButton>
        <Modal
            className=' fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bottom-0 h-fit bg-white p-5 rounded-lg'
            isOpen={isOpen}
            onOpenChange={onOpenChange}
        >
            <ModalContent className='w-1/2'>
                {(onClose) => (
                    <>
                        <ModalBody className='p-5 items-center'>
                            <div className='w-full ' >
                                <UiCreateTheme
                                    disciplineId={props.disciplineId}
                                    level={props.level}
                                    onSuccess={() => {
                                        if (props.onSuccess)
                                            props.onSuccess()
                                        onClose()
                                    }}
                                />
                            </div>
                        </ModalBody>
                    </>
                )}
            </ModalContent>
        </Modal>
    </>
}